<header fxLayout fxLayoutAlign="start center">
  <span fxFlex="50px">{{event.operator.name}}</span>
  <span fxFlex>{{event.fireDateTime|date:'yyyy-MM-dd HH:mm:ss'}}</span>
  <button [matMenuTriggerFor]="menu" mat-button type="button">
    {{productProcess.name}}
  </button>
  <mat-menu #menu="matMenu" xPosition="before">
    <button mat-menu-item>
      <mat-icon color="warn">delete</mat-icon>
      <span>{{'Common.undo'|translate}}</span>
    </button>
    <button mat-menu-item>Item 2</button>
  </mat-menu>
</header>

<section *ngIf="silkRuntimes?.length>0" fxLayout="column">
  <div fxLayout fxLayoutGap="16px" style="padding: 8px;">
    <mat-chip *ngFor="let it of event.silkExceptions" [selectable]="false" color="accent" disableRipple selected style="padding: 0 4px;">
      {{it.name|translate}}
    </mat-chip>

    <mat-chip *ngFor="let it of event.silkNotes" [selectable]="false" disableRipple>
      {{it.name|translate}}
    </mat-chip>
  </div>

  <mat-divider></mat-divider>

  <mat-table [dataSource]="silkRuntimes">
    <ng-container matColumnDef="code">
      <mat-header-cell *matHeaderCellDef>{{'Silk.code'|translate}}</mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.silk.code}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef>{{'position'|translate}}</mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.sideType}}-{{row.row}}-{{row.col}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="grade">
      <mat-header-cell *matHeaderCellDef>{{'grade'|translate}}</mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.grade?.name}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="spec">
      <mat-header-cell *matHeaderCellDef>{{'Silk.spec'|translate}}</mat-header-cell>
      <mat-cell *matCellDef="let row">
        {{row.silk.lineMachine.line.name}}-{{row.silk.spindle}}/{{row.silk.lineMachine.item}}
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="doffingNum">
      <mat-header-cell *matHeaderCellDef>{{'doffingNum'|translate}}</mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.silk.doffingNum}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="netWeight">
      <mat-header-cell *matHeaderCellDef>{{'netWeight'|translate}}</mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.netWeight|number:'.3-3'}}</mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</section>
